<template>
  <div>
    <a-card>
      <template #extra>
        <a-button type="primary">
          保存
        </a-button>
      </template>
      <a-row>
        <a-steps class="steps" :current="currentItem.index" @onChange="changeStep">
          <a-step  v-for="item in activityList" :title="item.businessName" />
        </a-steps>
      </a-row>
      <a-row :gutter="10" style="margin-top: 20px">
        <a-col span="6" v-if="currentItem.type == 1">
          <a-card title="审查项">
            <div class="item-container">
              <div @click="handle(item)" v-for="item in activityList" class="item"
                   :class="[selectedKeys == item.key?'selected':'']">
                <!--              <a-icon type="project" />-->
                <span>{{ item.businessName }}</span>
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col v-if="currentItem.type == 1" :span="18">


          {{ reviewItemList }}
        </a-col>
        <a-col v-else :span="24">
          <a-table
            rowKey="id"
            bordered
            size="middle"
            :columns="columns"
            :dataSource="reviewItemList"
          >
            <div slot="action" slot-scope="text, record">
            </div>
          </a-table>
        </a-col>
      </a-row>
    </a-card>

  </div>
</template>
<script>

import { getAction } from '@api/manage'

export default {
  props: {},
  data () {
    return {
      openKeys: [],
      selectedKeys: '',
      activityList: [],
      projectDetail: {},
      url: {
        // 根据项目ID以及标段ID查询详情
        queryByProjectIdAndSectionId: '/ExZbwjBidEvaluationConfig/exZbwjBidEvaluationConfig/queryByProjectIdAndSectionId',
        // 根据审查项ID查询审查项列表,
        queryExZbwjConformanceReviewDetailByMainId: '/exTenderFile/exZbwjConformanceReview/queryExZbwjConformanceReviewDetailByMainId'
      },
      currentItem: {},
      // 审查项列表
      reviewItemList:[],
      columns:[
        {
          title: '审查项',
          align: 'center',
          dataIndex: 'reviewItem'
        },
        {
          title: '审查标准',
          align: 'center',
          dataIndex: 'reviewStandard'
        },
      ]
    }
  },

  computed: {},
  watch: {},
  mounted () {
    this.loadItem()
  },
  methods: {
    loadItem () {
      let params = {
        projectId: '1847177195191836673',
        sectionId: '1847177195367997441'
      }
      getAction(this.url.queryByProjectIdAndSectionId, params).then(res => {
        if (res.success) {
          console.log(res)
          res.result.itemList.forEach((item, index) => {

          })
          this.activityList = res.result.itemList
          this.currentItem = this.activityList[0]
          this.queryExZbwjConformanceReviewDetailByMainId()
        }
      }).finally(() => {
      })
    },
    handle (item) {
      this.selectedKeys = item.key
    },
    changeStep (item) {
      this.currentItem = item
      this.queryExZbwjConformanceReviewDetailByMainId()
    },
    queryExZbwjConformanceReviewDetailByMainId () {
      if(this.currentItem.type !== 2){
        return;
      }
      getAction(this.url.queryExZbwjConformanceReviewDetailByMainId, { id: this.currentItem.businessId }).then(res => {
        if (res.success) {
          this.reviewItemList = res.result || []
        }
      }).finally(() => {
      })
    }
  }
}
</script>

<style scoped>

.item-container {

  .item {
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    text-align: center;
    font-size: 16px;
  }

  .selected {
    color: #1890FF;
  }
}
</style>
